{% extends 'base.html' %}
{% block title %}
    课程详细页面
{% endblock %}

{% block header %}
    <link rel="stylesheet" href="{% static '/css/index.css' %}">
    <link rel="stylesheet" href="{% static '/css/course_detail.css' %}">
    <script src="{% static 'videojs/video.min.js' %}"></script>
    <script src="{% static 'videojs/videojs-contrib-hls.min.js' %}"></script>
    <script src="{% static 'videojs/videojs-contrib-quality-levels.min.js' %}"></script>
    <script type="text/javascript" src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
    <script src="{% static 'js/course_detail.js' %}"></script>
{% endblock %}
{% block main %}
    <div class="main">
        <div class="course-nav">
            <div class="nav-container">
                <h3 class="title">在线课堂</h3>
                <ul class="nav-list">
                    <li class="active"><a href="#">最新课堂</a></li>
                    <li><a href="#">投资人说</a></li>
                    <li><a href="#">明星案例</a></li>
                    <li><a href="#">创业知识</a></li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div class="course-detail">
                <div class="course-info">
                    <p class="title">{{ course.title }}</p>
                    <div class="share-buy">
                        <div class="share">
                            <span class="title">分享至：</span>
                            <a href="#" class="weixin"></a>
                            <a href="#" class="weibo"></a>
                        </div>
                        <div class="buy">
                            {% if course.price > 0 %}
                                <span class="price pay">￥{{ course.price }}</span>
                                <a href="{% url 'course:course_order' course_id=course.pk %}" class="buy-btn">立即购买</a>
                            {% else %}
                                <span class="price free">免费</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="video-group">
                    <span hidden data-video-url="{{ course.video_url }}" data-cover-url="{{ course.cover_url }}" id="video-info"></span>
                    <div id="playercontainer"></div>
                </div>
            </div>
            <div class="bottom-wrapper">
                <div class="course-intr">
                    <div class="item">
                        <p class="title">课程讲师</p>
                        <div class="teacher">
                            <div class="t-image">
                                <img class="t-image-add" src="{{ course.teacher.avatar }}" alt="">
                            </div>
                            <div class="name-professional">
                                <p class="name">{{ course.teacher.username }}</p>
                                <p class="professional">{{ course.teacher.jobtitle }}</p>
                            </div>
                        </div>
                        <p class="item-content">
                            {{ course.teacher.profile }}
                        </p>
                    </div>
                    <div class="item">
                        <p class="title">课程简介</p>
                        <p class="content">{{ course.profile | safe }}</p>
                    </div>
                    <div class="item">
                        <p class="title">课程大纲</p>
                    </div>
                    <div class="item">
                        <p class="title">适宜人群</p>
                    </div>
                    <div class="item">
                        <p class="title">帮助中心</p>
                    </div>
                    <div class="item">
                        <p class="title">关于我们</p>
                    </div>
                </div>
                <div class="recommend">
                    <p class="title">推荐课程</p>
                    <ul class="re-course-list">
                        <li>
                            <a href="#">
                                <div class="re-info">
                                    <p class="re-info-title">教你制作抓住投资人眼球的商业计划书</p>
                                    <p class="re-teacher">知了课堂CEO</p>
                                </div>
                                <div class="re-image">
                                    <img class="re-image-add" src="https://static-image.xfz.cn/1526455098_289.png-course.list.small" >
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="re-info">
                                    <p class="re-info-title">教你制作抓住投资人眼球的商业计划书</p>
                                    <p class="re-teacher">知了课堂CEO</p>
                                </div>
                                <div class="re-image">
                                    <img class="re-image-add" src="https://static-image.xfz.cn/1526455098_289.png-course.list.small" >
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}